<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title th:text="${title}"></title>
    <link rel="icon" href="/global/img/core-img/favicon.ico">
    <link rel="stylesheet" href="/global/css/style.css">
    <link rel="stylesheet" href="/global/css/swiper.min.css">
</head>

<body>
<!-- Preloader -->
<div id="preloader">
    <div class="preload-content">
        <div id="original-load"></div>
    </div>
</div>
<div th:include="public::topbar"></div>
<div class="breadcumb-area bg-img" style="background-image: url(global/img/bg-img/about.jpg);">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
                <div class="breadcumb-content text-center">
                    <h2>about us</h2>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ##### Blog Wrapper Start ##### -->
<div class="blog-wrapper section-padding-100-0 clearfix">
    <div class="container">
        <div class="row align-items-end">
            <!-- Single Blog Area -->
            <div class="col-12 col-lg-4">
                <div class="single-blog-area clearfix mb-100">
                    <!-- Blog Content -->
                    <div class="single-blog-content">
                        <h4><a href="#" class="post-headline">Welcome to Ray's blog</a></h4>
                        <p class="mb-3">This is a website that shares the programming experience with everyone, which
                            records the bits and pieces of our programming process. hopefully this can provide
                            beneficial help to everyone. The world of programmers we understand.<br/> Coding, it's fun..</p>
                    </div>
                </div>
            </div>
            <!-- Single Blog Area -->
            <div class="col-12 col-lg-4">
                <div class="single-blog-area clearfix mb-100">
                    <!-- Blog Content -->
                    <div class="single-blog-content">
                        <p class="mb-3">站点主体框架基于Spring
                            cloud搭建，利用<a href="https://getbootstrap.com/">Bootstrap</a>实现响应时HTML模板，内容编辑则选用了<a href="https://summernote.org/">summernote编辑器</a>，
                            感谢这个世界上有开源的存在，才让我们搭建网站变得更加容易,也让我们有机会在网络的世界和大家分享一切。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="jumbotron">
        <h4>Our Members</h4>
        <div class="row">
            <div class="hero-area col-md-8 col-12">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <a th:href='${"/author?id=" + author.uid}' th:each="author:${authors}" class="swiper-slide">
                            <div class="card">
                                <img class="card-img-top" th:src="${author.avatar}" style="height: 100%"/>
                                <div class="card-body">
                                    <h4 class="card-title" th:text="${author.name}"></h4>
                                    <p class="card-text" th:text="${author.autoDetectResume()}"></p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <a href='/contact' class="col-12 col-md-4">
                <div class="card">
                    <img class="card-img-top" src="/global/img/default-avatar.png" alt="Card image"/>
                    <div class="card-body">
                        <h4 class="card-title">We need you!</h4>
                        <p class="card-text">Your ability is far beyond your imagination</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
<div th:include="public::bottombar"></div>
<script src="/global/js/jquery-2.2.4.min.js"></script>
<script src="/global/js/popper.min.js"></script>
<script src="/global/bootstrap/js/bootstrap.min.js"></script>
<script src="/global/js/plugins.js"></script>
<script src="/global/js/active.min.js"></script>
<script src="/global/js/events.min.js"></script>
<script src="/global/js/about.min.js"></script>
<script src="/global/js/swiper.min.js"></script>
</body>
</html>